<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-01 22:03:36
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-05 15:21:53
-->
<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form1">

                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="活动期限" :label-width="formLabelWidth">

                    <!-- start  开始时间   end结束时间  picker-options 当前时间日期选择器特有的选项参考下表 -->
                    <div class="block">
                        <el-date-picker v-model="timeArr" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>


                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.first_cateid" @change="changeCate(false)" placeholder="请选择一级分类">
                        <el-option v-for="item in cate" :key="item.id" :label="item.catename" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.second_cateid" @change="changeTo(false)" placeholder="请选择二级分类">
                        <el-option v-for="item in cateArr" :key="item.id" :label="item.catename"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品" :label-width="formLabelWidth">
                    <el-select v-model="form.goodsid" placeholder="请选择商品">
                        <el-option v-for="item in getGoods" :key="item.id" :label="item.goodsname"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { seckAdd, seckInfo, seckEdit, getList } from '@/request/api'
import { successAlert } from '@/utils/alert'
export default {
    data() {
        return {
            timeArr: [],  //时间
            formLabelWidth: '120px',
            form: {
                title: '',  //限时秒杀名称
                begintime: '',  //开始时间
                endtime: '',  //结束时间
                first_cateid: '', //商品一级分类编号
                second_cateid: '',  //商品二级分类编号
                goodsid: '',  //商品编号
                status: 1  //状态   1正常2禁用
            },
            getGoods: [],
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },
            cateArr: [],  //二级分类
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },

        }
    },
    props: ['info'],
    methods: {
        ...mapActions({
            requestCate: 'cate/listActions',
            requestGoods: 'goods/listActions',
            requestSeckill: 'seckill/listActions'
        }),
        //修改
        amend() {
            // 处理时间格式  
            this.form.begintime = +new Date(this.timeArr[0])
            // console.log(this.form.begintime);
            this.form.endtime = +new Date(this.timeArr[1])
            seckEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestSeckill()
                }
            })
        },

        getDetail(id) {
            // console.log(id);
            seckInfo({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    this.form.id = id
                    this.changeCate(true)
                    this.changeTo(true)
                    // 处理时间格式 后太返回的是字符串的时间戳 要将数据转换成Number并转为中国标准时间
                    this.form.begintime = new Date(Number(this.form.begintime));
                    // console.log(this.form.begintime);
                    this.form.endtime = new Date(Number(this.form.endtime));
                    this.timeArr = [this.form.begintime, this.form.endtime];
                }
            })
        },
        close() {
            this.cancel()
        },
        cancel() {
            this.info.isShow = false
            this.form = {
                title: '',  //限时秒杀名称
                begintime: '',  //开始时间
                endtime: '',  //结束时间
                first_cateid: '', //商品一级分类编号
                second_cateid: '',  //商品二级分类编号
                goodsid: '',  //商品编号
                status: 1  //状态   1正常2禁用
            },
                this.$refs.form1.resetFields()
            this.timeArr = []
        },
        confirm() {
            this.$refs.form1.validate((val) => {
                if (!val) {
                    return
                }
                this.form.begintime = +new Date(this.timeArr[0])
                // console.log(this.form.begintime);
                this.form.endtime = +new Date(this.timeArr[1])
                // console.log(this.form);
                seckAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        successAlert(res.msg)
                        this.cancel()
                        this.requestSeckill()
                    }
                })
            })
        },
        opened() {

            this.requestSeckill()
        },

        changeCate(n) {
            if (!n) {
                this.form.second_cateid = ''
            }
            let index = this.cate.findIndex((item) => item.id == this.form.first_cateid)
            // console.log(index);
            this.cateArr = this.cate[index].children

        },

        changeTo(n) {
            if (!n) {
                this.form.goodsid = ''
            }
            let params = {
                page: 1,
                size: 10,
                type: 2,
                cateid: this.form.second_cateid
            }
            getList(params).then(res => {
                // console.log(res.list.goodData[0].goodsname);
                if (res.code === 200) {
                    this.getGoods = res.list.goodData

                }
            })
        }

        //时间题
        // Time(e) {
        //     // console.log(e);
        //     // this.form.begintime = e[0];
        //     // this.form.endtime = e[1];
        // },

    },
    mounted() {
        //发起商品分类
        this.requestCate()
        //发起商品
        this.requestGoods()
    },
    watch: {},
    computed: {
        ...mapGetters({
            cate: 'cate/list',
            goods: 'goods/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>